<template>
  <div class="main flex-between">
    <div class="aside">
      <p v-for="(item, index) in asideList" :key="index" class="font-14-B pointer"
        :class="{ active: item === asideCheck }" @click="asideChange(item)">{{ item }}</p>
    </div>
    <div class="content">
      <account-manage v-if="asideCheck === '账号管理'"></account-manage>
      <consume-detail v-if="asideCheck === '资源消耗明细'"></consume-detail>
    </div>
  </div>
</template>

<script setup>
import AccountManage from './components/accountManage.vue';
import ConsumeDetail from './components/consumeDetail.vue';
import { ref } from 'vue';

const asideList = ['账号管理', '资源消耗明细'];

const asideCheck = ref('账号管理');

const asideChange = e => {
  asideCheck.value = e;
}
</script>

<style lang="less" scoped>
.main {
  width: 1200px;
  margin: 24px auto 0;
}

.aside {
  width: 200px;

  p {
    width: 100%;
    height: 56px;
    padding: 0 32px;
    line-height: 56px;
    color: #333;
    background: #fff;

    &.active {
      background: #ffe5ea;
      color: @main-color;
    }
  }
}

.content {
  width: 984px;
}
</style>
